<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF - 8">-->
<!--    <title>DashBoard</title>-->
<!--    &lt;!&ndash;引入js&ndash;&gt;-->
<!--    <script src="/js/socket.io.js"></script>-->
<!--    <script src="/js/jquery-3.1.1.min.js"></script>-->
<!--    <script src="/js/highcharts.js"></script>-->
<!--    <script src="/js/exporting.js"></script>-->
<!--    <script type="text/javascript">-->
<!--        // 用于存储学生数据-->
<!--        var studentData = {-->
<!--            A: { male: 0, female: 0 },-->
<!--            L: { male: 0, female: 0 }-->
<!--        };-->

<!--        // 连接-->
<!--        var socket = io.connect('127.0.0.1:7777');-->

<!--        socket.on('statemsg', function (message) {-->
<!--            console.log("杨茗茹");-->
<!--            console.log(message);-->
<!--            var dataArray = message.split(':');-->
<!--            var data = dataArray[1].split(',');-->
<!--            if (data.length === 3) {-->
<!--                var state = data[0];-->
<!--                var gender = data[1];-->
<!--                var count = parseInt(data[2]);-->
<!--                if (!studentData[state]) {-->
<!--                    studentData[state] = { male: 0, female: 0 };-->
<!--                }-->
<!--                if (gender === 'male') {-->
<!--                    studentData[state].male += count;-->
<!--                } else if (gender === 'female') {-->
<!--                    studentData[state].female += count;-->
<!--                }-->
<!--                document.getElementById('girlA').innerHTML = studentData['A'].female;-->
<!--                document.getElementById('boyA').innerHTML = studentData['A'].male;-->
<!--                document.getElementById('girlL').innerHTML = studentData['L'].female;-->
<!--                document.getElementById('boyL').innerHTML = studentData['L'].male;-->
<!--            }-->
<!--        });-->
<!--        window.onload = function () {-->

<!--            Highcharts.setOptions({-->
<!--                global: {-->
<!--                    // 设置时间，使用本地时间-->
<!--                    useUTC: false-->

<!--                }-->
<!--            });-->

<!--            // 设置Highcharts图标spline在#container中显示-->
<!--            var chart = Highcharts.chart('container', {-->
<!--                chart: {-->
<!--                    // 带标记曲线图-->
<!--                    type: 'spline',-->
<!--                    animation: Highcharts.svg,-->
<!--                    marginRight: 10,-->
<!--                    events: {-->
<!--                        // 加载事件-->
<!--                        load: function () {-->
<!--                            // 获取学籍A女生数据-->
<!--                            var series1 = this.series[0];-->
<!--                            // 获取学籍A男生数据-->
<!--                            var series2 = this.series[1];-->
<!--                            // 获取学籍L女生数据-->
<!--                            var series3 = this.series[2];-->
<!--                            // 获取学籍L男生数据-->
<!--                            var series4 = this.series[3];-->

<!--                            // 定时器，每两秒执行一次-->
<!--                            setInterval(function () {-->

<!--                                var x = (new Date()).getTime();-->

<!--                                // 处理学籍A女生数据-->
<!--                                var girlACount = parseInt(document.getElementById('girlA').innerHTML);-->
<!--                                if (!isNaN(girlACount)) {-->
<!--                                    series1.addPoint([x, girlACount], true, true);-->
<!--                                }-->

<!--                                // 处理学籍A男生数据-->
<!--                                var boyACount = parseInt(document.getElementById('boyA').innerHTML);-->
<!--                                if (!isNaN(boyACount)) {-->
<!--                                    series2.addPoint([x, boyACount], true, true);-->
<!--                                }-->

<!--                                // 处理学籍L女生数据-->
<!--                                var girlLCount = parseInt(document.getElementById('girlL').innerHTML);-->
<!--                                if (!isNaN(girlLCount)) {-->
<!--                                    series3.addPoint([x, girlLCount], true, true);-->
<!--                                }-->

<!--                                // 处理学籍L男生数据-->
<!--                                var boyLCount = parseInt(document.getElementById('boyL').innerHTML);-->
<!--                                if (!isNaN(boyLCount)) {-->
<!--                                    series4.addPoint([x, boyLCount], true, true);-->
<!--                                }-->
<!--                            }, 2000);-->
<!--                        }-->
<!--                    }-->
<!--                },-->
<!--                title: {-->
<!--                    text: '不同学籍男女生人数实时分析'-->
<!--                },-->
<!--                xAxis: {-->
<!--                    type: 'datetime',-->
<!--                    tickPixelInterval: 50-->
<!--                },-->
<!--                yAxis: {-->
<!--                    title: {-->
<!--                        text: '数量'-->
<!--                    },-->
<!--                    plotLines: [{-->
<!--                        value: 0,-->
<!--                        width: 1,-->
<!--                        color: '#808080'-->
<!--                    }],-->
<!--                    allowDecimals: false-->
<!--                },-->
<!--                tooltip: {-->
<!--                    formatter: function () {-->
<!--                        return '<b>' + this.series.name + '</b><br/>' +-->
<!--                            Highcharts.dateFormat('%Y - m - d %H:%M:%S', this.x) + '<br/>' +-->
<!--                            Highcharts.numberFormat(this.y, 0);-->
<!--                    }-->
<!--                },-->
<!--                legend: {-->
<!--                    enabled: true-->
<!--                },-->
<!--                exporting: {-->
<!--                    enabled: true-->
<!--                },-->
<!--                series: [-->
<!--                    {-->
<!--                        name: '学籍A女生人数',-->
<!--                        data: (function () {-->
<!--                            // 生成一个长度为20，值为随机数的数组，作为初始数据显示-->
<!--                            var data = [],-->
<!--                                time = (new Date()).getTime(),-->
<!--                                i;-->
<!--                            for (i = - 19; i <= 0; i += 1) {-->
<!--                                data.push({-->
<!--                                    x: time + i * 1000,-->
<!--                                    y: Math.random()-->
<!--                                });-->
<!--                            }-->
<!--                            return data;-->
<!--                        }())-->
<!--                    },-->
<!--                    {-->
<!--                        name: '学籍A男生人数',-->
<!--                        data: (function () {-->
<!--                            // generate an array of random data-->
<!--                            var data = [],-->
<!--                                time = (new Date()).getTime(),-->
<!--                                i;-->

<!--                            for (i = - 19; i <= 0; i += 1) {-->
<!--                                data.push({-->
<!--                                    x: time + i * 1000,-->
<!--                                    y: Math.random()-->
<!--                                });-->
<!--                            }-->
<!--                            return data;-->
<!--                        }())-->
<!--                    },-->
<!--                    {-->
<!--                        name: '学籍L女生人数',-->
<!--                        data: (function () {-->
<!--                            // 生成一个长度为20，值为随机数的数组，作为初始数据显示-->
<!--                            var data = [],-->
<!--                                time = (new Date()).getTime(),-->
<!--                                i;-->
<!--                            for (i = - 19; i <= 0; i += 1) {-->
<!--                                data.push({-->
<!--                                    x: time + i * 1000,-->
<!--                                    y: Math.random()-->
<!--                                });-->
<!--                            }-->
<!--                            return data;-->
<!--                        }())-->
<!--                    },-->
<!--                    {-->
<!--                        name: '学籍L男生人数',-->
<!--                        data: (function () {-->
<!--                            // generate an array of random data-->
<!--                            var data = [],-->
<!--                                time = (new Date()).getTime(),-->
<!--                                i;-->

<!--                            for (i = - 19; i <= 0; i += 1) {-->
<!--                                data.push({-->
<!--                                    x: time + i * 1000,-->
<!--                                    y: Math.random()-->
<!--                                });-->
<!--                            }-->
<!--                            return data;-->
<!--                        }())-->
<!--                    }-->
<!--                ]-->
<!--            });-->
<!--        };-->
<!--    </script>-->
<!--</head>-->

<!--<body>-->
<!--<div style="text-align: center">-->
<!--    &lt;!&ndash;显示学籍A男女人数&ndash;&gt;-->
<!--    <b>学籍A Girl: </b><span id="girlA"></span>-->
<!--    <b>学籍A Boy: </b><span id="boyA"></span>-->
<!--    &lt;!&ndash;显示学籍L男女人数&ndash;&gt;-->
<!--    <b>学籍L Girl: </b><span id="girlL"></span>-->
<!--    <b>学籍L Boy: </b><span id="boyL"></span>-->
<!--</div>-->
<!--<div id="container" style="width: 100%;height: 100%;margin: 0 auto"></div>-->
<!--</body>-->

<!--</html>-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DashBoard</title>
    <!--引入js-->
    <script src="/js/socket.io.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/exporting.js"></script>
    <script type="text/javascript">
        // 用于存储学生数据
        var studentData = {
            A: { male: 0, female: 0 },
            L: { male: 0, female: 0 }
        };

        // 连接
        var socket = io.connect('127.0.0.1:7777');

        socket.on('statemsg', function (message) {
            console.log("杨茗茹");
            console.log(message);
            var dataArray = message.split(':');
            var data = dataArray[1].split(',');
            if (data.length === 3) {
                var state = data[0];
                var gender = data[1];
                var count = parseInt(data[2]);
                if (!studentData[state]) {
                    studentData[state] = { male: 0, female: 0 };
                }
                if (gender === 'male') {
                    studentData[state].male += count;
                } else if (gender === 'female') {
                    studentData[state].female += count;
                }
            }
        });
        window.onload = function () {

            Highcharts.setOptions({
                global: {
                    // 设置时间，使用本地时间
                    useUTC: false
                }
            });

            // 设置Highcharts图标spline在#container中显示
            var chart = Highcharts.chart('container', {
                chart: {
                    // 带标记曲线图
                    type: 'spline',
                    animation: Highcharts.svg,
                    marginRight: 10,
                    events: {
                        // 加载事件
                        load: function () {
                            // 获取学籍A女生数据
                            var series1 = this.series[0];
                            // 获取学籍A男生数据
                            var series2 = this.series[1];
                            // 获取学籍L女生数据
                            var series3 = this.series[2];
                            // 获取学籍L男生数据
                            var series4 = this.series[3];

                            // 定时器，每两秒执行一次
                            setInterval(function () {

                                var x = (new Date()).getTime();

                                // 处理学籍A女生数据
                                series1.addPoint([x, studentData['A'].female], true, true);

                                // 处理学籍A男生数据
                                series2.addPoint([x, studentData['A'].male], true, true);

                                // 处理学籍L女生数据
                                series3.addPoint([x, studentData['L'].female], true, true);

                                // 处理学籍L男生数据
                                series4.addPoint([x, studentData['L'].male], true, true);
                            }, 2000);
                        }
                    }
                },
                title: {
                    text: '不同学籍男女生人数实时分析'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 50
                },
                yAxis: {
                    title: {
                        text: '数量'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }],
                    allowDecimals: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y - m - d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 0);
                    }
                },
                legend: {
                    enabled: true
                },
                exporting: {
                    enabled: true
                },
                series: [
                    {
                        name: '学籍A女生人数',
                        data: (function () {
                            // 生成一个长度为20，值为随机数的数组，作为初始数据显示
                            var data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (i = - 19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        }())
                    },
                    {
                        name: '学籍A男生人数',
                        data: (function () {
                            // generate an array of random data
                            var data = [],
                                time = (new Date()).getTime(),
                                i;

                            for (i = - 19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        }())
                    },
                    {
                        name: '学籍L女生人数',
                        data: (function () {
                            // 生成一个长度为20，值为随机数的数组，作为初始数据显示
                            var data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (i = - 19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        }())
                    },
                    {
                        name: '学籍L男生人数',
                        data: (function () {
                            // generate an array of random data
                            var data = [],
                                time = (new Date()).getTime(),
                                i;

                            for (i = - 19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        }())
                    }
                ]
            });
        };
    </script>
</head>

<body>
<div id="container" style="width: 100%;height: 100%;margin: 0 auto"></div>
</body>

</html>
